<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-03-27 20:16:14
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-07-10 19:22:25
 * @FilePath: \origin\shipin2\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>

  <div id="app">
     <!-- vue中运用router-view指定组件的呈现位置 -->
    <div class="header">
      <div class="left"> <div class="title1"><strong>延河流域植物功能性状信息管理平台</strong></div><div class="title2"><strong>Information management platform of Plant functional Traits in Yanhe River Basin</strong></div></div>
      <div class="right">
        <div class="subright"><div class="basicinfo"><router-link class="link" to='/cesium'>首页</router-link></div></div>
        <div class="subright"><div class="traitinfo"><router-link class="link" to='/cesium2' >草本群落功能性状</router-link></div></div>
        <div class="subright"><div class="shrubinfo"><router-link class="link" to='/cesium3' >灌木样地信息</router-link></div></div>
        <div class="subright"><div class="treeinfo"><router-link class="link" to='/cesium4' >乔木样地信息</router-link></div></div>
        </div>
    </div> 
    <router-view></router-view>
  </div>
</template>

<style>
html,body{
  padding: 0;
  margin: 0;
}
.header {
  position: relative;
  display: flex;
  margin: 0px auto;
  height: 6vw;
  width: 100%;
  flex-wrap: nowrap;
  background-color:#D3DEC0;
}
.left {
  flex: 5;
  /* background-color:pink; */
}
.title1 {
  margin-top: 2.5%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 2.3vw;
  color: #635819;
}
.title2 {
  margin-top: 2%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 1.1vw;
  color: #635819;
}
.right {
  display: flex;
  flex: 5;
  /* background-color: red; */
}
.subright {
  flex: 1;
}
.basicinfo {
  margin-top: 3.5vh;
  margin-left: 3.5vw;
  border: 0.5vh solid #3E6D0B;
  border-top-left-radius:0.6rem;
  border-bottom-right-radius:0.6rem;
  height: 5vh;
  width: 7vw;
  text-align: center;
  line-height: 5vh;
  font-size: 2.5vh;
}
.traitinfo{
  margin-top: 3.5vh;
  border: 0.5vh solid #3E6D0B;
  border-top-left-radius:0.6rem;
  border-bottom-right-radius:0.6rem;
  height: 5vh;
  width: 13vw;
  text-align: center;
  line-height: 5vh;
  font-size: 2.5vh;
}
.shrubinfo {
  margin-top: 3.5vh;
  margin-left: 1vw;
  border: 0.5vh solid #3E6D0B;
  border-top-left-radius:0.6rem;
  border-bottom-right-radius:0.6rem;
  height: 5vh;
  width: 10vw;
  text-align: center;
  line-height: 5vh;
  font-size: 2.5vh;
}
.treeinfo {
  margin-top: 3.5vh;
  margin-left: 0.5vw;
  border: 0.5vh solid #3E6D0B;
  border-top-left-radius:0.6rem;
  border-bottom-right-radius:0.6rem;
  height: 5vh;
  width: 10vw;
  text-align: center;
  line-height: 5vh;
  font-size: 2.5vh;
}
.navigation {
  margin: 5px 20px 5px 20px;
  float: left;
  background-color: #4bafbe;
  height: 36px;
  width: 200px;
  line-height: 36px;
  text-align: center;
}
.link{
text-decoration: none;
color: black;
}
</style>
